<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .big {

            width: 1000px;

            background-color: #ff9900;

            margin: 0 auto;

        }

        

        .pk {

            width: 80px;

            height: 16px;

        }

        

        .nme {

            margin-top: 20px;

        }

        

        .acc {

            margin-left: 15px;

        }

        

        .hz {

            width: 250px;

            height: 270px;

            background-color: blue;

            color: white;

            text-align: center;

            line-height: 270px;

            position: relative;

            top: 74px;

            left: 0;

            right: 0;

            bottom: 0;

            margin: 0 auto;

            display: none;

        }

        

        .aa {

            margin-left: 50px;

            margin-bottom: 20px;

        }

        

        img {

            width: 16px;

            height: 16px;

        }

    </style>

</head>



<body>

    <div class="big">

        <span></span> &emsp;&emsp;&emsp;姓名：

        <input type="text" class="nme">

        <br>&emsp;&emsp; 手机号：<input type="number" class="sjh">

        <br>&emsp;&emsp;&emsp; 评价：<input type="number" class="pk"><span>(0-5分)</span>

        <br><button onclick="add()" class="acc">添加</button>

        <div class="aa">



        </div>

    </div>

    <div class="hz">

        用户名不能为空

    </div>



</body>



</html>

<script>

    var nme = document.querySelector('.nme');

    var pk = document.querySelector('.pk');

    var sjh = document.querySelector('.sjh');

    var acc = document.querySelector('.acc');

    var hz = document.querySelector('.hz');

    var aa = document.querySelector('.aa');



    function sj() {

        var now = new Date();

        var n = now.getFullYear();

        var y = now.getMonth() + 1;

        var r = now.getDate();

        var s = now.getHours();

        var f = now.getMinutes();

        var m = now.getSeconds();

        return `${n} ${y} ${r} ${s}:${f}:${m}`;

    }



    function cun(arr) {

        localStorage.setItem('data', JSON.stringify(arr));

    }



    function qu() {

        var shuju = localStorage.getItem('data');

        if (shuju != null) {

            return JSON.parse(shuju);

        } else {

            return []

        }

    }

    //添加

    function add() {

        if (nme.value == '') {

            hz.style.display = 'block';

            setTimeout(function() {

                hz.style.display = 'none';

            }, 3000);

            return;

        } else {

            var arr = qu();

            arr.push({

                a: nme.value,

                b: sjh.value,

                c: pk.value

            })

            cun(arr);

            xr();

        }

    }



    function ss(a) {

        if (pk.value.length == a) {

            for (var i = 1; i <= a; i++) {

                document.write('*');

            }

        }

    }



    //渲染

    var i = 1;



    function xr() {

        aa.innerHTML = '';

        var arr = qu();

        for (var i = 0; i < arr.length; i++) {

            var div = document.createElement('div');

            div.innerHTML = `

            <p>${i+1}、姓名：${arr[i].a}</p>

            <p>手机号：${arr[i].b}</p>

            <p>评价：

                ${arr[i].c==0?'<img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt="">':''}

                ${arr[i].c==1?'<img src="./1.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt="">':''}

                ${arr[i].c==2?'<img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt="">':''}

                ${arr[i].c==3?'<img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./0.png" alt=""><img src="./0.png" alt="">':''}

                ${arr[i].c==4?'<img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./0.png" alt="">':''}

                ${arr[i].c==5?'<img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./1.png" alt=""><img src="./1.png" alt="">':''}

            </p>

            <p>${sj()}</p>

            <p><button ${disabled=i==0?'disabled':"0"} onclick="sy(${i})">上移</button><button onclick="del(${i})">删除</button><button ${disabled=i==arr.length-1?'disabled':"0"} onclick="xy(${i})">下移</button></p>

            `;

            aa.appendChild(div);

        }

    }

    xr();

    //删除

    function del(index) {

        if (confirm('你确定要删除吗')) {

            var arr = qu();

            arr.splice(index, 1);

            cun(arr);

            xr()

        }

    }

    //上移

    function sy(index) {

        var arr = qu();

        for (var i = 0; i < arr.length; i++) {

            if (index == i) {

                var t = arr[index];

                arr[index] = arr[i - 1];

                arr[i - 1] = t;

            }

        }

        cun(arr);

        xr()

    }

    //下移

    function xy(index) {

        var arr = qu();

        for (var i = 0; i < arr.length; i++) {

            if (index == i) {

                var t = arr[index];

                arr[index] = arr[i + 1];

                arr[i + 1] = t;

            }

        }

        cun(arr);

        xr()

    }

</script>